.el-link {
  font-size: 14px;
}

.el-link.is-underline:hover:after {
  border-bottom: 1px solid var(--color-primary);
}

.el-link.el-link--default {
  color: var(--color-font-second);
}

.el-link.el-link--default:hover {
  color: var(--color-primary);
}

.el-link.el-link--default:after {
  border-color: var(--color-primary);
}

@each $type in (primary, success, warning, danger, info) {
  .el-link.el-link--#{$type} {
    color: var(--color-#{$type});
    &:hover {
      color: var(--color-#{$type}-hover);
    }
    &:after {
      border-color: var(--color-#{$type});
    }
    &.is-disabled {
      color: var(--color-#{$type}-disabled);
    }
    &.is-underline:hover:after {
      border-color: var(--color-#{$type});
    }
  }
}
